'use strict';

import React, { Component } from 'react';
import {
    View,
    Dimensions,
    StyleSheet,
    BackHandler,
    AppRegistry,
    Platform,
    Modal,
    Image,
    DeviceEventEmitter,
} from 'react-native';

import {
    Container,
    Content,
    Footer,
    FooterTab,
    Button,
    Icon,
    Text,
    Form,
    Item,
    Label,
    Input,
    Spinner,
    Toast,
    Header,
    Left,
    Right,
    Body,
    Title,
    Thumbnail
} from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import I18n from '../i18n/i18n.js';
import ImageAssets from '../images/images.js';

class login_page extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            wait_state: false
        }
    }

    async componentWillMount() {
    }

    componentDidMount() {
    }

    async do_login(username, password) {
        const { navigate } = this.props.navigation;
    }

    render() {
        const { navigate } = this.props.navigation;
        return (
            <Container>
                <Content>
                    <View>
                        <Grid>
                            <Col style={{ backgroundColor: '#635DB7', height: 200 }}>
                                <Thumbnail source={ImageAssets.image_qq} style={{ alignSelf: "center", marginTop: 60, width: 80, height: 80 }} />
                                <Text style={{ alignSelf: "center", marginTop: 10, color: 'white' }}>{I18n.t('appname')}</Text>
                            </Col>
                        </Grid>
                    </View>

                    <Form>
                        <Item floatingLabel >
                            <Label>{I18n.t('username')}</Label>
                            <Input  />
                        </Item>
                        <Item floatingLabel last>
                            <Label>{I18n.t('password')}</Label>
                            <Input />
                        </Item>
                    </Form>

                    <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                        <Button block style={StyleSheet.flatten(styles.button_default)}
                            onPress={() => {
                                //this.do_login(this.state.username, this.state.password);
                            }
                            }>
                            <Text>{I18n.t('login')}</Text>
                        </Button>
                        <Button block light style={StyleSheet.flatten(styles.button_default)}
                            onPress={() => {
                                //this.do_login(this.state.username, this.state.password);
                            }
                            }>
                            <Text>{I18n.t('register')}</Text>
                        </Button>
                    </View>
                    <View>
                        <Grid>
                            <Row style={{ height: 100, justifyContent: 'space-around'}}>
                                <Thumbnail source={ImageAssets.image_mobile} style={{ alignSelf: "center", marginTop: 60, width: 40, height: 40  }}  />
                                <Thumbnail source={ImageAssets.image_qq}  style={{ alignSelf: "center", marginTop: 60, width: 40, height: 40  }}/>
                                <Thumbnail source={ImageAssets.image_wechat}  style={{ alignSelf: "center", marginTop: 60, width: 40, height: 40  }}/>
                          
                            </Row>
                        </Grid>
                    </View>
                </Content>
            </Container>
        );
    }
}

login_page.navigationOptions = ({ navigation }) => ({
    header: (
        <Header>
            <Left style={{ flex: 1 }}>
            </Left>
            <Body style={{ flex: 1 }}>
                <Title>{I18n.t('appname')}</Title>
            </Body>
            <Right style={{ flex: 1 }} />
        </Header>
    )
});

const styles = StyleSheet.create({
    button_default: {
        marginTop: 20,
        width: screenWidth / 3,
        alignSelf: 'center',
    },
    form_style: {
        marginTop: 20,
        
        alignItems: 'center',
        alignSelf: 'center',
    }
});

function mapStateToProps(state) {
    return {}
}

function mapDispatchToProps(dispatch) {
    return {
    }
}

const LoginPage = connect(
    mapStateToProps,
    mapDispatchToProps
)(login_page)

export default LoginPage;
